import QtQuick 1.0

Rectangle {
   objectName:  "mainMenu"
   id: menuRect
   color: "#91AA9D"
   clip:  true

   FocusScope {
       id: menuScope
       width: parent.width; height: parent.height

       GridView {
            id: mainMenu
            x: parent.x+5
            y: parent.y+5
            width: parent.width - 10; height: parent.height - 10
            focus: true
            cellWidth: 145
            cellHeight: 50
            objectName: "mainMenu"
            onActiveFocusChanged: {
                if (activeFocus)
                    comboBox.state = "Menu"
            }

            highlightFollowsCurrentItem: true;
            highlight: Rectangle {
                color: "#3E606F"
            }
            preferredHighlightBegin: 80
            preferredHighlightEnd: 220
            KeyNavigation.down: flickableView
            clip: true
            model: menuModel

            ListModel {
                id: menuModel
                ListElement { name: "Playlists" }
                ListElement { name: "Song Folders" }
                ListElement { name: "Podcasts" }
                ListElement { name: "Subscriptions" }
                ListElement { name: "Now Playing" }
            }

            delegate: menuDelegate

            Component {
                id: menuDelegate
                Rectangle {

                    id: contentRect
                    width:  140
                    height: 40
                    anchors.margins:  10
                    color: "transparent"
                    smooth: true
                    radius: 10
                    StyledText {
                        anchors.centerIn:  contentRect
                        anchors.margins: 5
                        font.pointSize: 10
                        color: "#FCFFF5"
                        text: name
                        id: menuText
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked:  {
                            mainMenu.currentIndex = index
                            console.log("Click: " + name);
                            comboBox.state = ''
                            mainWindow.showOption = name;
                        }
                    }
                }
            }


            states: State {
                name: "active"; when: menuDelegate.activeFocus
                PropertyChanges { target: contentRect; color: "#FCFFF5"; scale: 1.1 }
            }

            transitions: Transition {
                NumberAnimation { properties: "scale"; duration: 100 }
            }
        }
    }
}
